<template>
  <div class="setPassword">
    <Header>
      <div slot="title" class="header-title">设置密码</div>
      <div slot="left" class="header-left">
        <img src="@/assets/index/back.png" alt />
      </div>
    </Header>
    <div class="fenge"></div>
    <div>
      <van-form :show-error='false' validate-trigger='onSubmit' validate-first @submit="onSubmit" ref="form">
        <van-field
          v-model="password"
          type="password"
          name="password"
            @blur="blur('password',password)"
            @input="change('password',password)"
          label="密码"
          clearable
          placeholder="请设置密码，至少两种字符组合"
          :rules="[
            {
              required: true,
              validator: validatePass,
              message: (value)=>{
                  if(!value){
                    return '请输入密码'
                  }
                  if(value.length<6){
                    return '长度6-20个字符之间'
                  }
                  if(this._str(value, value[0]) == value.length){
                    return '不能使用同一字符'
                  }
                  if(!this.validatePass(value)){
                    return '非法字符，请使用字母、数字的组合，6-20个字符'
                  }
                },
            },
          ]"
        ></van-field>
      </van-form>
    </div>
    <div style="margin: 25px">
      <van-button
        class="setPasswordButton"
        round
        block
        type="default"
        native-type="submit"
        @click="buttonclick"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import { Form, Field, Button, Divider } from "vant";
import { firstLoginAPI } from "./api/login";
import md5 from 'js-md5';
import {
  warningMessage,
  successMessage,
  errorMessage,
  linkName,
  linkOpen,
} from "./utils/function";
export default {
  components: {
    Header,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Divider.name]: Divider,
  },
  data() {
    return {
      password: "",
      loginLoading: false,
    };
  },
  methods: {
    blur(type,v){
      let me = this;
      if(v){
        let form = 'form';
        
        switch (type) {
          case 'password':
            this.$refs[form].validate('password');
            break;
          default:
            break;
        }
      }
    },
    change(type,v){
      if(v){
        let form = 'form';
        let me = this;
        switch (type) {
          case 'password':
            this.$refs[form].validate('password');
            break;
          default:
            break;
        }
      }
    },
    _str(value, n){
        var tmp = 0;
        for(var i = 0; i < value.length; i++){
            if(value.charAt(i) == n){    //charAt()方法可返回指定位置的字符
              tmp++;
              console.log(tmp);
            }
        }
        return tmp;    
    },
    buttonclick() {
      this.$refs["form"].submit();
    },
    onSubmit() {
      let me =this;
      if (this.loginLoading) return;
      this.loginLoading = true;
      let form = {};
      form.password = md5(me.password);
      firstLoginAPI(form).then(
        (res) => {
          if (res.data.code === 0) {
            this.loginJump();
          } else {
            this.loginLoading = false;
            warningMessage(res.data.msg);
          }
        },
        (error) => {
          this.loginLoading = false;
        }
      );
    },
    // 登录成功跳转
    loginJump(){
      let me = this;
      successMessage('密码设置成功',()=>{
          this.loginLoading = false
          me.$router.push({path:'/'})
      })
    },
    validatePass(value) {
      let reg = /^(?=.*\d)[A-Za-z\d]{6,20}$/;
      let flag = reg.test(value);
      if(flag){
        flag = !(this._str(value, value[0]) == value.length)
      }
      return flag
    },
  },
};
</script>

<style lang="scss">
@import "./css/index.scss";
.setPasswordButton {
  background-image: url("./img/denglu-but.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: #ffffff;
}
.setPassword {
  width: 100%;
  height: 100%;
  .fenge {
    width: 100%;
    height: 15px;
    background-color: #f3f3f3;
  }
}
</style>